<script lang="ts" setup>
import { useSystemLog } from './utils'
import type { SystemLogType } from './utils/model'

const {
  dataList,
  columns,
  queryParams,
  loading,
  selectedRowKeys,
  search,
  batchDeleteChange,
  onSelectChange,
  paginationChange,
  contextHolder,
  openDetails,
  reset
} = useSystemLog()
</script>

<template>
  <div class="post">
    <contextHolder />
    <SpTableQuery @clear="reset" @search="search">
      <template #default="{ expand }">
        <a-form :labelCol="{ style: { width: '68px' } }" label-align="left">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="标题">
                <a-input v-model:value="queryParams.title" placeholder="请输入标题" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="IP地址">
                <a-input v-model:value="queryParams.operIp" placeholder="请输入IP地址" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="操作地点">
                <a-input v-model:value="queryParams.ipAddress" placeholder="请输入操作地点" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="请求接口">
                <a-input v-model:value="queryParams.operUrl" placeholder="请输入请求接口" />
              </a-form-item>
            </a-col>
          </a-row>
          <div v-show="expand">
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="操作人员">
                  <a-input v-model:value="queryParams.operName" placeholder="请输入操作人员" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <SpDict
                  v-model="queryParams.status"
                  dictType="system_log_status"
                  label="日志状态"
                  placeholder="请选择日志状态"
                  type="select"
                />
              </a-col>
              <a-col :span="6">
                <SpDict
                  v-model="queryParams.requestMethod"
                  dictType="system_log_request_method	"
                  label="请求方法"
                  placeholder="请选择请求方法"
                  type="select"
                />
              </a-col>
              <a-col :span="6">
                <SpDict
                  v-model="queryParams.businessType"
                  dictType="system_log_business_type"
                  label="业务类型"
                  placeholder="请选择业务类型"
                  type="select"
                />
              </a-col>
              <a-col :span="6">
                <SpDict
                  v-model="queryParams.operatorType"
                  dictType="system_log_operator_type"
                  label="操作类型"
                  placeholder="请选择操作类型"
                  type="select"
                />
              </a-col>
            </a-row>
          </div>
        </a-form>
      </template>
    </SpTableQuery>
    <a-card>
      <SpTable
        :column-list="columns"
        :data="dataList"
        :loading="loading"
        :paging="queryParams"
        :row-key="(record) => record.id"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        delete-button
        derive-button
        print-button
        @pagination-change="paginationChange"
        @batch-delete-change="batchDeleteChange"
      >
        <template #operation="{ record }: { record: SystemLogType }">
          <a-button type="link" @click="openDetails(record)">详情</a-button>
        </template>
      </SpTable>
    </a-card>
  </div>
</template>

<style scoped></style>
